<template>
    <div class="tosetting">
        <div class="header">
            <span @click="back">&#xe63f;</span><span>设置</span>
        </div>
        <ul>
            <li>编辑资料</li>
            <li>关于我们</li>
            <li>消息通知</li>
            <li>清除缓存</li>
            <li>版本信息v4.2.3</li>
        </ul>
        <button @click="tooutlogin">退出登录</button>
        <!-- 这个地方要弹出模态框进行退出登录的确定 -->
        <!-- <ro></router-view>
         -->
         <!-- <confirmout v-if="outLogin"></confirmout> -->
    </div>
</template>

<script>
// import confirmout from  '@/components/setting/confirmout'
import { MessageBox } from 'mint-ui'
import {
  mapMutations,
  mapState,
  mapGetters
} from 'vuex'
export default {
  name: 'tosetting',
  methods: {
    ...mapMutations(['outlogin']),
    back () {
      history.back()
    },
    tooutlogin () {
      //   退出登录发生的一系列动作？
      MessageBox
        .confirm('确定退出登录?').then(action => {
          // console.log(12)
          // console.log(this)  注意在里面调用的时候this的应用
          this.outlogin(this.user)
          this.$router.history.push('/home')
        })
    }
  },
  computed: {
    ...mapState(['user']),
    ...mapGetters(['outLogin'])
  }
//   components: {
//       confirmout
//   }
}
</script>

<style lang='scss'>
@font-face {
  font-family: 'iconfont';  /* project id 931790 */
  src: url('//at.alicdn.com/t/font_931790_wdge2pny96i.eot');
  src: url('//at.alicdn.com/t/font_931790_wdge2pny96i.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931790_wdge2pny96i.woff') format('woff'),
  url('//at.alicdn.com/t/font_931790_wdge2pny96i.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931790_wdge2pny96i.svg#iconfont') format('svg');
}
.header{
    border-bottom: 1px solid #dddddd;
    span:nth-child(1){
        font-size: 20px;
        font-family: iconfont;
        margin-left: 20px;
        margin-top: 20px;
        display: inline-block;
    }
    span:nth-child(2){
        font-size: 20px;
        // font-family: iconfont;
        margin-left: 127px;
        margin-top: 20px;
        display: inline-block;
    }
}
ul li{
    margin-left: 10px;
    height: 40px;
    line-height: 40px;
    // text-align:
    border-bottom: 1px solid #dddddd;
}
button{
    display: block;
    height: 40px;
    width: 120px;
    margin: 0 auto;
    margin-top: 200px;
}

</style>
